<template>
    <div>
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item :label="rowInfo.name"></el-form-item>
                <el-form-item label="名称：">
                    <el-input
                        placeholder="请输入探测器名称"
                        v-model="searchForm.name"
                        @keyup.enter.native="search"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns">
                <el-button type="primary" icon="el-icon-plus" @click="addNew" size="mini"></el-button>
            </div>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                ref="singleUnitTableList"
                :data="tableData"
                style="width: 100%">
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="图片" prop="fcfacilitiesPicUrl" width="120">
                    <template v-if="scope.row.fcfacilitiesPicUrl != ''" slot-scope="scope">
                        <img :src="scope.row.fcfacilitiesPicUrl.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="scope.row.fcfacilitiesPicUrl">
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="系统类型" prop="fireSystemTypeName"></el-table-column>
                <el-table-column label="具体位置" prop="levelLocation"></el-table-column>
                <el-table-column label="备注" prop="remarks"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="showSon(scope.row)" type="text" size="small">子集</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="editFireStation(scope.row)" type="text" size="small">编辑</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="normalDelete(scope.row)" type="text" size="small">删除</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="perfectDelete(scope.row)" type="text" size="small">彻底</el-button>
                    </template>
                </el-table-column>
                <el-table-column type="expand" width='1'>
                    <template slot-scope="scope">
                        <subset-table :rowInfo="scope.row"></subset-table>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-show="tableData.length > 0"
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 新增/编辑弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="800px"
            top='5vh'
            v-if="dialogBaseInfo"
            :visible.sync="dialogBaseInfo"
            @close="closeBaseInfo"
            v-dialogDrag>
            <fire-service-mainten :organizationId="rowInfo.organizationId" isTop=0 :parentId="rowInfo.id" :serverTypeList="serverTypeList" :serverId="rowInfo.serverId" :oldInfo="baseInfo" :closeFun="closeBaseInfo"></fire-service-mainten>
        </el-dialog>
    </div>
</template>
<script>
import { getServerIdListData, getFcfList, delAssignFcf, delLogiAssignFcf } from '@/api/sysConfig'
import FireServiceMainten from '../Dialog/FireServiceMainten'

export default {
    name: 'SubsetTable',
    props: {
        rowInfo: {
            required: true
        },
        serverTypeList: {
            required: true
        }
    },
    components: {
        FireServiceMainten
    },
    data() {
        return {
            loading: false,
            searchForm: {
                name: ''
            },
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 新增/编辑弹框
            dialogTitle: '',
            dialogBaseInfo: false,
            baseInfo: {},
        }
    },
    created() {
        this.getTableData()
    },
    methods: {
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            let parames = {
                organizationId : that.rowInfo.organizationId,
                serverId : that.rowInfo.serverId,
                parentId : that.rowInfo.id,
                name: that.searchForm.name.trim(),
                pageIndex : that.currentPage - 1,
                pageSize : that.pageSize,
                queryType : 1
            }
            // 获取列表信息
            getFcfList(parames).then(res => {
                that.tableData = res.data
                that.total = res.total
                that.loading = false
            })
        },
        handleSizeChange(pageSize) {
            this.getTableData(this.currentPage, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage, this.pageSize)
        },
        search() {
            this.getTableData(1)
        },
        // 新增
        addNew() {
            let that = this
            that.baseInfo = {}
            that.dialogBaseInfo = true
        },
        closeBaseInfo(flag) {
            let that = this
            that.dialogBaseInfo = false
            if(flag) {
                that.getTableData(this.baseInfo.id?'':1)
            }
        },
        // 展开子集
        showSon(row) {
            this.$refs.singleUnitTableList.toggleRowExpansion(row)
        },
        // 编辑
        editFireStation(row) {
            let that = this
            that.baseInfo = row
            // 显示弹框
            that.dialogBaseInfo = true
        },
        // 删除
        normalDelete(row) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            if (row) {
                this.$confirm('确认删除该设备吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    roundButton: true
                }).then(() => {
                    delLogiAssignFcf({
                        organizationId : that.rowInfo.organizationId,
                        ids : row.id
                    }).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            that.getTableData()
                        }
                    })
                }).catch(() => {})
            }
        },
        // 彻底删除
        perfectDelete(row) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            if (row) {
                this.$confirm('确认彻底删除该设备吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    roundButton: true
                }).then(() => {
                    delAssignFcf({
                        organizationId : that.rowInfo.organizationId,
                        ids : row.id
                    }).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            that.getTableData()
                        }
                    })
                }).catch(() => {})
            }
        }
    }
}
</script>
